<template>
	<view>
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content" mode="dot"
			:dots-styles="dotsStyles">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="notice">
			<u-notice-bar mode="horizontal" :text="noticeList"></u-notice-bar>
		</view>
		<!-- 代办事项和重要通知 -->
		<view class="panel-view-list">
			<view class="panel-view" @click="goTaskPage()">
				<image src="/static/images/home/home-item.png" class="panel-img"></image>
				<view>
					<view class="panel-num">{{ visitTaskNum }}</view>
					<view class="panel-title">待办事项</view>
				</view>
			</view>
			<view class="panel-view" @click="goNoticeList()">
				<image src="/static/images/home/home-important.png" class="panel-img"></image>
				<view>
					<view class="panel-num">{{ importNoticeTotal }}</view>
					<view class="panel-title">重要通知</view>
				</view>
			</view>
		</view>
		<!-- 宫格组件 -->
		<view class="home-container">
			<uni-section title="日常工作"></uni-section>
			<view class="grid-body">
				<uni-grid :column="4" :showBorder="false">
					<uni-grid-item v-for="item in workList" :key="item.key">
						<view class="grid-item-box" @click="clickGrid(item)">
							<image :src="item.icon" mode="widthFix" class="item-box-img"></image>
							<text class="text">{{ item.name }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="home-container">
			<uni-section title="我的应用"></uni-section>
			<view class="grid-body">
				<uni-grid :column="4" :showBorder="false">
					<uni-grid-item v-for="item in applyList" :key="item.key">
						<view class="grid-item-box" @click="clickGrid(item)">
							<image :src="item.icon" mode="widthFix" class="item-box-img"></image>
							<text class="text">{{ item.name }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="home-container">
			<uni-section title="任务记录" type=""></uni-section>
			<view style="padding:20rpx">
				<u-row>
					<view style="height:120px;width: 100%;">
						<qiun-data-charts type="ring" :opts="taskOpts" :chartData="taskChartData" />
					</view>
				</u-row>
				<view style="margin-top:12px">
					<!-- <view class="task-item">
						<view class="task-item-title"><text>数据核查</text></view>
						<view class="task-item-line"><u-line-progress :percentage="taskItem1Percentage"
								v-if="taskItem1Percentage<=15" activeColor="#0FD9D2" height="30rpx">
								<template slot="default">
									<text class="u-percentage-slot" style="color:#0FD9D2">{{taskItem1Percentage}}%</text>
								</template>

							</u-line-progress>
							<u-line-progress :percentage="taskItem1Percentage" v-else activeColor="#0FD9D2" height="30rpx">
							</u-line-progress>
						</view>
						<view class="task-item-value" style="text-align:right;color:#0FD9D2">
							{{statisticsData.gridEndHouseCount}}/{{statisticsData.gridHouseCount}}
						</view>
					</view> -->
					<view class="task-item">
						<view class="task-item-title"><text>人员走访</text></view>
						<view class="task-item-line"><u-line-progress :percentage="taskItem2Percentage"
								v-if="taskItem2Percentage<=15" activeColor="#5683F6" height="30rpx">
								<template slot="default">
									<text class="u-percentage-slot" style="color:#5683F6">{{taskItem2Percentage}}%</text>
								</template>

							</u-line-progress>
							<u-line-progress :percentage="taskItem2Percentage" v-else activeColor="#5683F6"
								height="30rpx" />
						</view>
						<view class="task-item-value" style="text-align:right;color:#5683F6">
							{{statisticsData.gridEndVisitTaskCount}}/{{statisticsData.gridVisitTaskCount}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import * as HomeApi from '@/api/home.js'
	import * as StatisticsApi from "@/api/statistics.js"
	export default {
		data() {
			return {
				statisticsData: {},
				taskItem1Percentage: 0,
				taskItem2Percentage: 0,
				taskChartData: {},
				dotsStyles: {
					selectedBackgroundColor: '#fff',
					selectedBorder: '#fff'
				},
				current: 0,
				swiperDotIndex: 0,
				data: [{
						image: '/static/images/banner/banner01.jpg'
					},
					{
						image: '/static/images/banner/banner02.jpg'
					},
					{
						image: '/static/images/banner/banner03.jpg'
					},
					{
						image: '/static/images/banner/banner04.jpg'
					}
				],
				noticeList: [],
				importNoticeTotal: 0,
				visitTaskNum: 0,
				applyList: [{
						name: '统计分析',
						icon: '/static/images/home/home-statistics.png',
						key: 'analysis',
						path: '/pages/statistics/index'
					},
					// {
					// 	name: '绩效管理',
					// 	icon: '/static/images/home/home-performance.png',
					// 	key: 'performance',
					// 	path: ''
					// }
				],

				workList: [{
						name: '通知公告',
						icon: '/static/images/home/home-notice.png',
						path: '/pages/notice/list/index',
						key: 'notice'
					},
					{
						name: '数据核查',
						icon: '/static/images/home/home-check.png',
						key: 'dataCheck',
						path: '/pages/house/houseList/index'
					},
					{
						name: '社情民意',
						icon: '/static/images/home/home-advice.png',
						path: '/pages/task/index',
						key: 'publicOpinion'
					},
					
					{
						name: '核查记录',
						icon: '/static/images/home/home-record.png',
						key: 'weekDayReport',
						path: '/pages/house/recordList/index'
					},
					{
						name: '巡查日志',
						icon: '/static/images/home/home-patrolLog.png',
						key: 'patrolLog',
						path: '/pages/patrolLog/list/index'
					},
					{
						name: '专项任务',
						icon: '/static/images/home/home-special.png',
						key: 'specialTask',
						path: '/pages/special-task/list/index'
					}
				],
				taskOpts: {
					rotate: false,
					rotateLock: false,
					padding: [2, 2, 2, 2],
					dataLabel: true,
					legend: {
						show: true,
						position: "left",
						float: 'top',
						margin: -2
						// lineHeight: 25,
					},
					color: ["#73C0DE", "#3CA272"],
					title: {
						name: "1250",
						fontSize: 30,
						fontWeight: 'bold',
						color: "#2D2C3C"
					},
					subtitle: {
						name: "任务总数",
						fontSize: 12,
						color: "#A4A9BF"
					},
					extra: {
						ring: {
							customRadius: 53,
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 15,
							offsetAngle: -60,
							labelWidth: 10,
							border: false,
						},
					},
				},
			}
		},
		methods: {
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e) {
				this.$modal.showToast('模块建设中~')
			},
			goTaskPage(){
				uni.switchTab({
					url: `/pages/task/index`
				})
				uni.setStorageSync('tabValue', 1)
			},
			goNoticeList() {
				uni.setStorageSync('isImport', 1)
				uni.switchTab({
					url: `/pages/notice/list/index`
				})
			},
			clickGrid(item) {

				if (item.path) {
					uni.navigateTo({
						url: item.path,
						fail() {
							uni.switchTab({
								url: item.path
							})
							uni.setStorageSync('tabValue', 1)
						}
					})
				} else {
					this.$modal.showToast('模块建设中~')
				}
			},
			getMessageListData(params) {
				HomeApi.getMessageListData(params).then((res) => {
					const list = res.data.list.map((i, index) => `${index + 1}. ${i.name}`)
					this.$set(this, 'noticeList', list)
				})
			},
			getToDoNoticeCount(userId) {
				HomeApi.getToDoNoticeCount(userId).then((res) => {
					this.$set(this, 'importNoticeTotal', res.data.informNum || 0)
					this.$set(this, 'visitTaskNum', res.data.visitTaskNum || 0)
				})
			},
			getTaskStatisticsData() {
				StatisticsApi.getTaskStatisticsData().then(res => {
					const data = res.data.list[0];
					const {
						appHouseCountAnalyseDTO,
						appVisitTaskCountAnalyseDTO
					} = data;
					const statisticsData={
						...appHouseCountAnalyseDTO,
						...appVisitTaskCountAnalyseDTO
					}

					this.statisticsData=statisticsData
					this.taskItem1Percentage = ((statisticsData.gridEndHouseCount / statisticsData
						.gridHouseCount) * 100).toFixed(1)
					this.taskItem2Percentage = ((statisticsData.gridEndVisitTaskCount /
						statisticsData.gridVisitTaskCount) * 100).toFixed(1)
					//任务记录统计
					const chart2Data = {
						series: [{
							data: [{
									name: `任务完成总数 ${statisticsData.gridEndVisitTaskCount}`,
									color: "#2fc25b",
									value: statisticsData.gridEndVisitTaskCount,
									labelText:statisticsData.gridVisitTaskCount>0?((statisticsData.gridEndVisitTaskCount/statisticsData.gridVisitTaskCount)*100).toFixed(1)+'%':'0%',
								},
								{
									name: `任务总数 ${statisticsData.gridVisitTaskCount}`,
									value: statisticsData.gridVisitTaskCount,
									color: "#73C0DE",
									labelShow: false
								}
							]
						}]
					};
					this.taskChartData = JSON.parse(JSON.stringify(chart2Data));
					this.taskOpts.title.name = statisticsData.gridVisitTaskCount>0?statisticsData.gridVisitTaskCount: '0'
				})
			},
		},
		onLoad() {
			//获取通知轮播
			this.getMessageListData({
				pageNo: 1,
				pageSize: 3,
				isBroadcast: 1
			})

			// //获取待办事项、重要通知数量
			const userInfo = uni.getStorageSync('userInfo')
			const {
				userId
			} = userInfo
			this.getToDoNoticeCount(userId)
			this.getTaskStatisticsData()
		},
		onShow() {
			// //获取待办事项、重要通知数量
			const userInfo = uni.getStorageSync('userInfo')
			const {
				userId
			} = userInfo
			this.getToDoNoticeCount(userId)
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 28rpx;
		line-height: inherit;
	}

	/* #endif */
	.notice {
		margin: 10rpx;
		border-radius: 50rpx;
		overflow: hidden;

		.uni-noticebar {
			margin-bottom: 0;
		}
	}

	.home-container {
		margin: 20rpx 10rpx;
		padding: 10rpx;
		border-radius: 20rpx;

		.text {
			text-align: center;
			margin-top: 20rpx;
		}

		.textTask {
			font-size: 26rpx;
		}

		.grid-item-box {
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.item-box-img {
				width: 96rpx;
				height: 96rpx;
			}
		}
	}

	.panel-view-list {
		margin: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;

		.panel-view {
			width: 328rpx;
			height: 140rpx;
			padding: 10rpx 36rpx;
			position: relative;

			.panel-img {
				width: 328rpx;
				height: 140rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}

		.panel-num {
			font-family: D-DIN;
			font-size: 30px;
			font-weight: bold;
			line-height: normal;
			letter-spacing: 0em;
			font-variation-settings: 'opsz' auto;
			font-feature-settings: 'kern' on;
			color: #ffffff;
		}

		.panel-title {
			font-family: Source Han Sans;
			font-size: 14px;
			font-weight: normal;
			line-height: normal;
			letter-spacing: 0em;

			font-variation-settings: 'opsz' auto;
			font-feature-settings: 'kern' on;
			color: #ffffff;
		}
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	.u-percentage-slot {
		padding: 1px 5px;
		// background-color: $u-warning;
		// border-radius: 100px;
		font-size: 18rpx;
		margin-right: -100px;
	}

	.task-num {
		margin-left: 8rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.task-item {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;

		.task-item-title {
			width: 20%;
		}

		.task-item-line {
			width: 65%;
			padding: 16rpx 0
		}

		.task-item-value {
			width: 15%
		}
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>
